<template>
  <div class="order-wrapper">
     <div class="dian"><img src="../../assets/头部.png"></div>
    <div class="header">
      <div class="header-img">
        <img src="../../assets/定位.png">
        
      </div>
      <span>北京理工大学国防科技园2号楼10层</span>
      <div class="header-img img1"><img src="../../assets/铃.png"></div>
    </div>
    <div class="menu-input">
			 <input class="menu_search" placeholder="山姆会员商店优惠商品" />
       <img src="../../assets/搜索.png">
		</div>
    <div class="festiv"><img src="../../assets/双11.png"></div>
    <div class="card">
      <div class="card1">
        <div class="card1-select">
          <img src="../../assets/chao1.png">
          <span>超市便利</span>
        </div>
        <div class="card1-select">
          <img src="../../assets/chao2.png">
          <span>菜市场</span>
        </div>
        <div class="card1-select">
          <img src="../../assets/chao3.png">
          <span>水果店</span>
        </div>
        <div class="card1-select">
          <img src="../../assets/chao4.png">
          <span>鲜花绿植</span>
        </div>
        <div class="card1-select">
          <img src="../../assets/chao5.png">
          <span>医药健康</span>
        </div>
      </div>
      <div class="card1">
         <div class="card1-select">
          <img src="../../assets/chao6.png">
          <span>家居时尚</span>
         </div>
        <div class="card1-select">
          <img src="../../assets/chao7.png">
          <span>烘培蛋糕</span>
        </div>
        <div class="card1-select">
          <img src="../../assets/chao8.png">
          <span>签到</span>
        </div>
        <div class="card1-select">
          <img src="../../assets/chao9.png">
          <span>大牌免运</span>
        </div>
        <div class="card1-select">
          <img src="../../assets/chao10.png">
          <span>红包客服</span>
        </div>
      </div>
    </div>
    <div class="heng"></div>
    <div class="title"><h2>附近店铺</h2></div>

    
    <div class="shop" v-for="item in dataList" :key="item.id" @click="All()">
      <div class="shop-img"><img :src="item.img"></div>
      <div class="shop-word">
        <P class="shop-word-p1">{{item.storeName}}</P>
        <P class="shop-word-p2">
          <span>月售{{item.price}}</span>
          <span>起送￥{{item.nums}}</span>
          <span>基础运费￥{{item.free}}</span>
        </P>
        <P class="shop-word-p3">{{item.inclu}}</P>
      </div> 
    </div>
    
  </div>
</template>
<script>

</script>
<script>
export default {
  // name: 'Home'
  data(){
    return{
      dataList:[{
        id:1,
        storeName:'沃尔玛',
        img:require("../../assets/woerma.png"),
        price:'1万+',
        nums:0,
        free:5,
        inclu:'VIP尊享满89元减4元运费券'
      },{
        id:2,
        storeName:'山姆会员商店',
        img:require("../../assets/shanmu.png"),
        price:'2千+',
        nums:0,
        free:5,
        inclu:'联合利华洗护满10减5'
      }]
    }
  },methods:{
    All(){
      console.log("跳转至所有页面")
      this.$router.push('/All')
    }
  }
}
</script>

<style lang="css" scoped>
.order-wrapper{
  width: 100vw;
  min-height:100vh ;
  
}
.dian{
  width: 100%;
  height: 5vw;
  position: fixed;
  top: 0;
}
.dian img{
  width: 100%;
  height: 5vw;
}
.header{
  width:90vw ;
  height: 6vh;
  margin: 4vw auto 3vw auto;
  display: flex;
  justify-content: space-between;
  line-height: 6vh;
}
.header span{
  /* margin-top: -2vw; */
  margin-left: -5vw;
}
.header-img img{
  width: 8vw;
  height: 5vh;
  margin-top: 1vw;
}
.menu-input {
 margin-left: 5vw;
 margin-top: 0vw;
 position: relative;
}
.menu_search {
 width: 90vw;
 height: 8vw;
 background-color: #f5f5f5;
 border: none;
 border-radius: 10vw;
}

input::-ms-input-placeholder {
 text-align: center;
}

input::-webkit-input-placeholder {
 text-align: center;
}
.menu-input img{
  width: 6vw;
  height: 6vw;
  margin-left: -86vw;
  margin-top:1vw ;
  position: absolute;
}
.festiv{
  width: 90vw;
  height: 15vh;
  border-radius: 4vw;
  margin: 4vw auto 2vw auto;
}
.festiv img{
  width: 90vw;
  height: 15vh;
  border-radius: 3vw;
}
.card{
  width: 90vw;
  height: 43vw;
  margin: 4vw auto 4vw auto;
  flex-direction: column;
  justify-content: space-between;
  
  display: flex;
 
}
.card1{
  width: 90vw;
  height: 20vw;
  display: flex;
  justify-content: space-between;
   
}
.card1-select{
  width: 16vw;
  height: 15vw;
  text-align: center;
  
}
.card1-select img{
  width: 14vw;
  height: 13vw;

}
.card1-select span{
   font-size: 4vw;
   margin-top: 1vw;
}
.heng{
  width: 100%;
  height: 3vw;
  margin-top: 2vw;
  background-color: #80808033;
}
.title{
  width: 90vw;
  font-size: 4vw;
  font-weight: 600;
  margin: 3vw auto 0vw auto;
}
.shop{
  width: 90vw;
  height: 25vw;
  margin: -3vw auto 5vw auto;
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 4vw; */
  /* border: 1px solid red; */
}
.shop-img{
  width: 20vw;
  height: 20vw;
}
.shop-img img{
   width: 20vw;
  height: 20vw;
}
.shop-word{
  width: 65vw;
  height: 25vw;
  border-bottom: 1px solid #c1c0c9;
  line-height: 4vw;
}
.shop-word p{
  margin-top: 0vw;
}
.shop-word-p1{
  font-size: 5.5vw;
  font-weight: 600;
}
.shop-word-p2{
  display: flex;
  justify-content: space-between;
}
.shop-word-p3{
  color: red;
}
</style>
